<template>
  <van-popup v-model="show" position="bottom" :style="{ height: '100%' }" :get-container="getContainer">
    <van-nav-bar
      :title="`选择${moldName}的属性`"
      left-text="取消"
      left-arrow
      @click-left="$emit('close')"
    />
    <van-form ref="submitForm" @submit="onSubmit">
      <van-row v-for="(item, index) in productAttr.categoryAttributeList" :key="index">
        <van-field
          v-if="item.optionType==='0'"
          :name="item.name"
          :label="item.name"
          label-width="3.5em"
          :rules="[{ required: true, message: '请选择'+ item.name}]"
        >
          <template #input>
            <van-radio-group v-model="item.value" direction="horizontal">
              <van-row>
                <van-col v-for="(optional,idx) in item.optional" :key="idx" :span="8">
                  <van-radio :name="optional" style="padding-top: 10px">{{ optional }}</van-radio>
                  <div
                    v-if="item.manuallyAdded&&item.manuallyAdded==='1'&&productAttr.newAttr[index].show"
                    style="font-size: 11px;color: #ee0a24"
                    @click="deleteCategoryAttr(item,index,optional)"
                  >删除</div>
                </van-col>
              </van-row>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-else-if="item.optionType==='1'"
          label-width="3.5em"
          :name="item.name"
          :label="item.name"
          :rules="[{ required: true, message: '请选择'+ item.name}]"
        >
          <template #input>
            <van-checkbox-group v-model="item.value" direction="horizontal">
              <van-row>
                <van-col v-for="(optional,idx) in item.optional" :key="idx" :span="8" style="padding-top: 5px">
                  <van-checkbox :name="optional" style="margin-right: 10px">{{ optional }}</van-checkbox>
                </van-col>
              </van-row>
            </van-checkbox-group>
          </template>
        </van-field>
        <van-field
          v-else
          v-model="item.value"
          label-width="3.5em"
          :name="item.name"
          :label="item.name"
          :placeholder="'请填写'+item.name"
          :rules="[{ required: true, message: '请填写'+item.name }]"
        />
        <div v-if="item.manuallyAdded&&item.manuallyAdded==='1'&&productAttr.newAttr[index].show">
          <van-field
            v-model="productAttr.newAttr[index].value"
            label-width="3.5em"
            :label="item.name"
            size="mini"
            :placeholder="'请输入想要添加的'+item.name"
            :rules="[{ required: true, message: '请填写'+item.name}]"
          >
            <template #button>
              <van-button size="small" type="info" native-type="button" @click="saveCategoryAttr(item,index,productAttr.newAttr[index])">确定</van-button>
              <van-button size="small" native-type="button" @click="disableInput(productAttr.newAttr[index])">取消</van-button>
            </template>
          </van-field>
        </div>
        <div
          v-show="!productAttr.newAttr[index].show&&item.optionType!=='2'"
          style="font-size: 12px;float: right;padding-right: 10px"
          @click="showInput(productAttr.newAttr[index])"
        >没有想要的{{ item.name }}？
          <span style="color: #1989fa">
            点击此处添加或修改
          </span>
        </div>
      </van-row>
      <van-field
        v-model="productAttr.unitPrice"
        label-width="3.5em"
        name="单价"
        label="单价"
        type="number"
        placeholder="请填写单价"
        :rules="[{ required: true, message: '请填写单价'}]"
        @input="amountChange"
      />
      <van-field
        v-model="productAttr.quantity"
        label-width="3.5em"
        name="数量"
        label="数量"
        type="digit"
        placeholder="请填写数量"
        :rules="[{ required: true, message: '请填写数量'}]"
        @input="amountChange"
      />
      <div class="bottom_button">
        <van-button type="danger" block round native-type="submit">确定</van-button>
      </div>
    </van-form>
  </van-popup>
</template>

<script>

import { selectByCategoryId, updateCategoryAttributeById } from '@/api/categoryAttribute'
import { Dialog, Toast } from 'vant'

export default {
  name: 'SelectAttribute',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: this.visible,
      active: 0,
      moldName: '',
      submitForm: {},
      productAttr: {
        unitPrice: '',
        quantity: '',
        newAttr: [],
        categoryAttributeList: []
      }
    }
  },
  methods: {
    init(row) {
      this.moldName = row.moldName
      this.productAttr.unitPrice = row.unitPrice
      selectByCategoryId(row.categoryId).then(resp => {
        if (resp.success) {
          const array = []
          for (let i = 0; i < resp.data.length; i++) {
            array[i] = {}
            array[i].value = ''
            array[i].show = false
            var dataListElement = resp.data[i]
            if (dataListElement.optionType !== '2') {
              dataListElement.optional = dataListElement.optional.split('|')
            }
            if (dataListElement.optionType !== '2') {
              // 初始化el-checkbox数据 ！！！！！
              dataListElement.value = []
            } else {
              dataListElement.value = ''
            }
          }
          this.productAttr.categoryAttributeList = resp.data
          this.productAttr.newAttr = array
        }
      })
    },
    onSubmit() {
      this.submitForm.color = this.getAttributeValue('color')
      this.submitForm.material = this.getAttributeValue('material')
      this.submitForm.size = this.getAttributeValue('size')
      this.submitForm.length = this.getAttributeValue('length')
      this.submitForm.unitPrice = this.productAttr.unitPrice
      this.submitForm.quantity = this.productAttr.quantity
      this.$emit('close', this.submitForm)
    },
    getAttributeValue(key) {
      return this.productAttr.categoryAttributeList.filter(e => e.attributeKey === key)[0].value
    },
    amountChange(val) {
      const quantity = this.productAttr.quantity
      const unitPrice = this.productAttr.unitPrice
      if (quantity && unitPrice) {
        this.submitForm.amount = Number(quantity) * Number(unitPrice)
      }
    },
    showInput(row) {
      row.show = true
    },
    disableInput(row) {
      row.show = false
      this.$refs.submitForm.resetValidation()
    },
    saveCategoryAttr(item, index, row) {
      const optional = this.productAttr.categoryAttributeList[index].optional
      if (this.productAttr.newAttr[index].value == null || this.productAttr.newAttr[index].value === '') {
        Toast.fail('请输入属性值')
        return
      }
      if (optional.indexOf(this.productAttr.newAttr[index].value) !== -1) {
        Toast.fail('已存在相同选项,' + this.productAttr.newAttr[index].value)
        return
      }
      const data = JSON.parse(JSON.stringify(item))
      this.productAttr.categoryAttributeList[index].optional.push(this.productAttr.newAttr[index].value)
      data.optional = this.productAttr.categoryAttributeList[index].optional.join('|')
      updateCategoryAttributeById(data).then(resp => {
        if (resp.success) {
          Toast.success('添加成功')
          this.productAttr.newAttr[index].value = ''
          row.show = false
        }
      })
    },
    deleteCategoryAttr(item, index, optional) {
      Dialog.confirm({
        title: '删除确认',
        message: '是否删除此' + item.name + '选项:' + optional
      }).then(() => {
        const data = JSON.parse(JSON.stringify(item))
        const optionalArray = this.productAttr.categoryAttributeList[index].optional
        const indexOf = optionalArray.indexOf(optional)
        if (indexOf !== -1) {
          optionalArray.splice(indexOf, 1)
          this.productAttr.categoryAttributeList[index].optional = optionalArray
          data.optional = optionalArray.join('|')
          updateCategoryAttributeById(data).then(resp => {
            if (resp.success) {
              Toast.success('删除成功')
            }
          })
        }
      }).catch(() => {
      })
    },
    getContainer() {
      return document.body
    }
  }
}
</script>
<style scoped>

</style>

